<template>
  <a-modal @cancel="$emit('cancel')" :visible="visible" :footer="null" >
    <template slot="title">
      <span>{{moduleName}}</span>
      <a-button-group
      v-if="mode[module]"
      >
        <a-button 
        v-for="(item,index) in mode[module]"
        :type="choose[module] == index?'primary':'link'"
        :disabled="choose[module] == index"
        @click="choose[module] = index"
        size="small"
        >{{item}}</a-button>
      </a-button-group>
    </template>
    <!-- 样本集  -->
    <div v-if="module===0">
      <span class="label">样本集：</span>
      <a-select
        class="label-to"
        show-search
        placeholder="选择样本集"
        option-filter-prop="children"
        style="width: 200px"
        :filter-option="true"
        @change="confChange(thisnode)"
        :value="modeSample.title"
        size="small"
      >
        <a-select-opt-group 
          v-for="(items,key) in sampleList"
          :label="key"
        >
          <a-select-option 
            v-for="item in items"
            @click="$emit('chooseModeSample',item)"
            :disabled="!item.targetRow.length"
            :value="item.id"
          >
            {{item.title+`${!item.targetRow.length? '(不含目标变量)':''}`}}
          </a-select-option>
        </a-select-opt-group>
      </a-select>
      <p v-if="modeSample.id">数据量：{{
        modeSample.type? 
        (modeSample.confInfo? modeSample.confInfo.chooseNum:'ERROR'): 
        (modeSample.fileInfo? modeSample.fileInfo.total:'ERROR')
      }}</p>
    </div>
    <!-- 数据处理 -->
    <div v-else-if="module===1">
      <p v-if="![0,3].includes(choose[module])">暂不支持!(桥豆麻袋)</p>
      <div v-if="choose[module]===0">
        <a-table
          :data-source="columnsData? columnsData:[]"
          :columns="columns"
          :loading="Boolean(!columnsData)"
          :rowKey="(record)=>`${modeSample.id}-${record.name}`"
          :locale="{filterConfirm: '确认',filterReset: '重置'}"
          bordered
          :pagination="{
            pageSize:pageSize,
            showSizeChanger:true,
            size:'small',
            onShowSizeChange:(a,b)=>{
              pageSize = b
            }
          }"
          :scroll="{y:'calc(100vh - 180px - 48px - 100px)'}"
        >
          <template #namefilter>
            <a-input-search
              placeholder="过滤变量"
              :loading="searchLoading"
              @change="e=>{
                $emit('search')
                $emit('searchChange',e);
              }"
              @pressEnter="e=>{$emit('searchChange',e)}"
            />
          </template>
          <template #deltools>
            删除
            <a-popconfirm
              title="将所示变量全部删除?"
              ok-text="确认删除"
              cancel-text="取消"
              @confirm="$emit('delAll');confChange(thisnode)"
            >
              <a-icon
                title="全部删除"
                type="delete" class="anticon anticon-ok "
              />
            </a-popconfirm>
            <a-popconfirm
              title="将所示变量全部恢复?"
              ok-text="确认恢复"
              cancel-text="取消"
              @confirm="$emit('useAll');confChange(thisnode)"
            >
              <a-icon
                title="全部恢复"
                type="plus" class="anticon anticon-ok "
              />
            </a-popconfirm>
          </template>
          <template #role="value,item">
            <a-select v-if="!item.del" v-model="item.role"
              @change="confChange(thisnode)"
              style="width: 100%;">
              <a-select-option v-for="item in roleDict" :value="item.value">
                {{item.text}}
              </a-select-option>
              <a-select-option disabled :value="999">其他</a-select-option>
            </a-select>
            <span v-else>————</span>
          </template>
          
          <template #del="value,item">
            <a-select v-model="item.del" style="width: 100%;"
              @change="confChange(thisnode)"
            >
              <a-select-option v-for="(text,value) in ['否','是']" :value="value">
                {{text}}
              </a-select-option>
            </a-select>
          </template>
        </a-table>
      </div>
      <div v-if="choose[module]===1">
        <a-radio-group @change="confChange(thisnode)"  v-model="verifMode.type">
          <a-radio :style="radioStyle" :value="1">
            全部
          </a-radio>
          <a-radio :style="radioStyle" :value="3">
            训练/验证集
          </a-radio>
        </a-radio-group>
        <a-divider orientation="left">说明</a-divider>
        <p v-if="verifMode.type===1">使用全部数据作为建模训练和验证数据集。<br>参数固定为：训练集100%、验证集0。</p>
        <p v-else-if="verifMode.type===2">使用全部数据建模，使用10Fold交叉验证。<br>
          训练集<a-input-number 
          style="width: 60px;"
          @change="confChange(thisnode)"  v-model="verifMode.training" 
          :min="1" :max="100"
          />%、验证集{{100 - verifMode.training}}%。</p>
        <p v-else-if="verifMode.type===3">指定训练和验证数据集的比例。<br>
          训练集<a-input-number 
          style="width: 60px;"
          @change="confChange(thisnode)"  v-model="verifMode.training" 
          :min="1" :max="100"
          />%、验证集{{100 - verifMode.training}}%。</p>
      </div>
    </div>
    <!-- 变量粗筛 -->
    <div v-else-if="module===2">
      <div v-if="choose[module]===0">
        <p style="margin-top: 12px !important;">缺失值处理:</p>
        <a-radio-group @change="confChange(thisnode)"  v-model="missing.type">
          <a-radio :style="radioStyle" :value="1">
            删除缺失值
          </a-radio>
          <a-radio :style="radioStyle" :value="2">
            按比例删除<span v-if="missing.type===2">
              (&gt;<a-input-number 
                style="width: 60px;"
                @change="confChange(thisnode)"  v-model="missing.value" 
                :min="1" :max="100"
              />%)
            </span>
          </a-radio>
          <a-radio :style="radioStyle" :value="3">
            不处理缺失值
          </a-radio>
        </a-radio-group>
        <template v-if="[1,2].includes(missing.type)">
          <p>缺失值定义:</p>
          <a-radio-group @change="confChange(thisnode)"  v-model="missing.ismissing">
            <a-radio :value="1">&lt;0</a-radio>
            <a-radio :value="2">=NULL</a-radio>
            <a-radio :value="3">&lt;0 && NULL</a-radio>
          </a-radio-group>
        </template>
        <divi :text="conf.scVariableCoarseSieve.missingExplain" />
      </div>
      <div v-if="choose[module]===1">
        <p style="margin-top: 12px !important;">删除条件:</p>
        <a-radio-group @change="confChange(thisnode)"  v-model="homogeny.type">
          <a-radio :style="radioStyle" :value="1">
            单值(? X%)
            <a-input v-if="homogeny.type===1" @change="confChange(thisnode)"  v-model="homogeny.value" />
          </a-radio>
          <a-radio :style="radioStyle" :value="2">
            熵值<span v-if="homogeny.type===2">
              (&lt;<a-input-number 
                style="width: 60px;"
                @change="confChange(thisnode)"  v-model="homogeny.value" 
                :min="1" :max="100"
              />%)
            </span>
          </a-radio>
          <a-radio :style="radioStyle" :value="3">
            同质性 <span v-if="homogeny.type===3">
              (&gt;<a-input-number 
                style="width: 60px;"
                @change="confChange(thisnode)"  v-model="homogeny.value" 
                :min="1" :max="100"
              />%)
            </span>
          </a-radio>
        </a-radio-group>
        <divi :text="conf.scVariableCoarseSieve.homogeneityExplain" />
      </div>
    </div>
    <!-- 重要性评价 -->
    <div v-else-if="module===3">
      <!-- <a-divider orientation="left">重要性评价</a-divider> -->
      <div>
        <a-radio-group @change="confChange(thisnode)"  v-model="importanceAssessment.type">
          <a-radio v-for="item in conf.scImportanceAssessment.label" :style="radioStyle" :value="item.value">
            {{item.title}}
        		<popo :title="item.title" :text="item.text" />
          </a-radio>
        	<br>
          <span>值：</span>
          <a-input-number
            style="width: 80px;"
            @change="confChange(thisnode)"  v-model="importanceAssessment.value" 
            :min="conf.scImportanceAssessment.valueConf.min" 
            :step="conf.scImportanceAssessment.valueConf.step"
            :max="conf.scImportanceAssessment.valueConf.max"
          />
        </a-radio-group>
        <divi :text="conf.scVariableSelection.corr.explain" />
        <!-- <span style="width:130px;display:inline-block;">
				{{item.title}}
				<popo :title="item.title" :text="item.text" />
				</span>
				<br>
        <a-input-number 
          style="width: 120px;"
          @change="confChange(thisnode)"  v-model="importanceAssessment[item.title.replace('-','').replace(' ','')]" 
          :min="item.min" :max="item.max" :step="item.step"
        /> --></div>
      <divi :text="conf.scImportanceAssessment.explain" />
    </div>
    <!-- 变量选择 -->
    <div v-else-if="module===4">
      <div v-if="choose[module]===0">
        <a-radio-group @change="confChange(thisnode)"  v-model="corr.type">
          <a-radio v-for="item in conf.scVariableSelection.corr.label" :style="radioStyle" :value="item.value">
            {{item.title}}
						<popo :title="item.title" :text="item.text" />
          </a-radio>
					<br>
          <span>值：</span>
          <a-input-number
            style="width: 80px;"
            @change="confChange(thisnode)"  v-model="corr.value" 
            :min="0.00" 
            :step="0.01"
            :max="1.00"
          />
        </a-radio-group>
        <divi :text="conf.scVariableSelection.corr.explain" />
      </div>
      <div v-if="choose[module]===1">
        <a-radio checked disabled>K-MEANS</a-radio>
        <divi :text="conf.scVariableSelection.cluster.explain" />
      </div>
      <div v-if="choose[module]===2">
        <a-radio checked disabled>禁用</a-radio>
        <divi :text="conf.scVariableSelection.colinearity.explain" />
      </div>
    </div>
    <!-- 变量分箱 -->
    <div v-else-if="module===5">
      <a-radio-group @change="confChange(thisnode)"  v-model="binn.type">
        <a-radio :style="radioStyle" :value="1">
          自动分箱
        </a-radio>
        <a-radio-group v-if="binn.type===1" style="margin-left:30px" @change="confChange(thisnode)"  v-model="binn.value">
          <a-radio v-for="item in conf.scVariablePoints.label" :value="item.value">
            {{item.title}}
            <popo :title="item.title" :text="item.text" />
          </a-radio>
          <P>箱数：<a-input-number
            style="width: 80px;"
            @change="confChange(thisnode)"  v-model="binn.valueV" 
            :min="0"
            :max="100"
          /></P>
        </a-radio-group>
        <a-radio :style="radioStyle" :value="2">
          交互式分箱
        </a-radio>
        <p  v-if="binn.type===2"  style="margin-left:30px">[导入文件]</p>
      </a-radio-group>
			<divi :text="conf.scVariablePoints.explain" />
    </div>
    <!-- 逻辑回归 -->
    <div v-else-if="module===6">
      <template v-if="modename==='AutoTR'">
        <p><span style="width:130px;display:inline-block;">
        		选择模型
        	</span>
          <a-select v-model="regre.type" @change="confChange(thisnode)" style="width: 120px">
            <a-select-option v-for="item in conf.scLogisticRegression.AutoTR.modelList" :value="item.value">
              {{item.text}}
            </a-select-option>
          </a-select>
        </p>
        <a-divider orientation="left">参数</a-divider>
        <p v-for="item in conf.scLogisticRegression.AutoTR.confs">
          <span style="width:130px;display:inline-block;">
            {{item.name}}
            <popo :title="item.name" :text="item.title"/>
          </span>
          <a-input-number 
            style="width: 120px;"
            @change="confChange(thisnode)"  v-model="regre[item.value]" 
            :min="item.min" :max="item.max" :step="item.step"
        /></p>
      </template>
      <template v-else>
        <p><span style="width:100px;display:inline-block;">
        		选择模型
        	</span>
          <a-select default-value="逻辑回归" style="width: 120px">
            <a-select-option value="逻辑回归">
              逻辑回归
            </a-select-option>
          </a-select>
        </p>
        <a-divider orientation="left">参数</a-divider>
        <p>
          <span style="width:100px;display:inline-block;">
        		收敛次数
        	</span>
          <a-select
            @change="confChange(thisnode)" 
            v-model="regre.restraintimes" style="width: 120px">
            <a-select-option v-for="item in [100,200,500,1000,10000]" :value="item">
              {{item}}
            </a-select-option>
          </a-select>
        </p>
        <p>
          <span style="width:100px;display:inline-block;">
        		误差
        	</span>
          <a-select
            @change="confChange(thisnode)" 
            v-model="regre.error" style="width: 120px">
            <a-select-option v-for="item in [0.00001,0.0001,0.001]" :value="item">
              {{item}}
            </a-select-option>
          </a-select>
        </p>
      </template>
      <divi :text="conf.scVariablePoints.explain" />
    </div>
    <!-- 评分卡生成 -->
    <div v-else-if="module===7">
      <!-- <a-divider orientation="left">交换参数</a-divider> -->
      <p>
        <span style="width:100px;display:inline-block;">
          基准比率
          <popo title="基准比率" :text="conf.scScoreCardGeneration.label['基准比率']"/>
        </span>
        1:<a-input-number 
          style="width: 120px;"
          @change="confChange(thisnode)"  v-model="exchangeParam.scrate" 
          :min="0" :max="100"
        /></p>
      <p>
        <span style="width:100px;display:inline-block;">
          对应分值
          <popo title="对应分值" :text="conf.scScoreCardGeneration.label['对应分值']"/>
        </span>
        <a-input-number 
          style="width: 120px;"
          @change="confChange(thisnode)"  v-model="exchangeParam.scscore" 
          :min="0" :max="1000"
        /></p>
      <p>
        <span style="width:100px;display:inline-block;">
          翻倍分值PDO
          <popo title="翻倍分值PDO" :text="conf.scScoreCardGeneration.label['翻倍分值PDO']"/>
        </span>
        <a-input-number 
          style="width: 120px;"
          @change="confChange(thisnode)"  v-model="exchangeParam.scPDO" 
          :min="0" :max="100"
        /></p>
        <divi :text="conf.scScoreCardGeneration.explain" />
    </div>
    <!-- 模型评价 -->
    <div v-else-if="module===8">
        <!-- <a-divider orientation="left">评价指标</a-divider> -->
        <template v-if="evaluate">
          <p v-for="item in conf.scModelEvaluation.label">
            <template v-if="evaluate[item.name.replace('-','').replace(' ','')]">
              <span style="width:130px;display:inline-block;">
                {{item.name}}
                <popo v-if="item.title" :title="item.name" :text="item.title" />
              </span>
              <span>{{evaluate[item.name.replace('-','').replace(' ','')]}}</span>
            </template>
          </p>
        </template>
        <template v-else>
          <p>无模型评价</p>
          <p style="font-size: 12px;color: #0008;">全量数据(数据处理-验证方式:选择全部)无模型评价;或是程序异常;</p>
        </template>
        <divi :text="conf.scModelEvaluation.explain" />
      </div>
  </a-modal>
</template>

<script>
import popo from './popo.js'
import { RANDOM,dateFormat } from '@/utils/functions'
import { mapGetters,mapActions,mapMutations } from 'vuex'
import divi from './divi.js'
import { roleDict } from '@/conf'
export default{
  name:'confModal',
	components:{popo,divi},
  data(){
    return{
      pageSize:10,
      roleDict:Object.freeze(roleDict),
      namefilter:'132',

      columns:[{
          dataIndex:'name',
          key:'name',
          slots: { title: 'namefilter' },
          scopedSlots: { customRender: 'name' },
          ellipsis:true
        },{
          title: '角色',
          dataIndex: 'role',
          key: 'role',
          // customRender:value=>{
          //   const item = roleDict.find(e=>e.value==value)
          //   return item? item.text:'ERROR'
          // },
          scopedSlots: { customRender: 'role' },
          filters:roleDict,
          onFilter: (value, record) => record.role == value,
        },{
          // title: '删除',
          dataIndex: 'del',
          key: 'del',
          slots: { title: 'deltools' },
          // customRender:value=>value?'是':'否',
          scopedSlots: { customRender: 'del' },
          filters:[
            { text: '是', value: 1 },
            { text: '否', value: 0 },
          ],
          onFilter: (value, record) => record.del == value,
        }
      ],
      radioStyle: {
        display: 'block',
        height: '30px',
        lineHeight: '30px',
      },
      fileList:[],
      mode:{
        '1':["变量配置","验证方式"],
        '2':["缺失值","同质性"],
        '4':["相关系数","聚类","共线性"],
      },
      choose:{
        '1':0,
        '2':0,
        '4':0,
      },
      confChange:this._debounce(thisnode=>{
        if(thisnode.module != 0 && [2,3].includes(thisnode.status))
          this.$parent.changeStatus({node:thisnode,status:-1})
      },2000),
    }
  },
  props:['thisnode','visible','sampleList','modeSample',
    'verifMode',
    'missing',
    'homogeny',
    'importanceAssessment',
    'corr',
    'binn',
    'regre',
    'exchangeParam',
    'evaluate',
    'columnsData',
    'searchLoading','modename'],
  computed:{
    ...mapGetters(['conf']),
    module(){
      return this.thisnode.module
    },
    moduleName(){
      return this.thisnode.id
    }
  }
}
</script>

<style scoped>
  .ant-btn-link[disabled]{
    color:#1890ff !important;
  }
  .ant-btn-primary[disabled]{
    color:#fff !important;
  	background: #1890ff !important;
  }
</style>